<!DOCTYPE html>
<html lang="zh-Hans" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <title>Bookmark</title>
  </head>
  <body class="overflow-x-hidden">
    <!-- 导航栏 -->
    <nav class="container relative mx-auto p-6">
      <!-- 弹性容器 -->
      <div class="flex items-center justify-between space-x-20 my-6">
        <!-- LOGO -->
        <div class="z-30">
          <img src="/images/logo-bookmark.svg" alt="" id="logo" />
        </div>
        <!-- 菜单项 -->
        <div
          class="hidden items-center space-x-10 uppercase text-grayishBlue md:flex"
        >
          <a href="#features" class="tracking-widest hover:text-softRed"
            >功能</a
          >
          <a href="#download" class="tracking-widest hover:text-softRed"
            >下载</a
          >
          <a href="#faq" class="tracking-widest hover:text-softRed">常见问题</a>

          <a
            href=""
            class="px-8 py-2 text-white bg-softRed border-2 border-softRed rounded-lg shadow-md hover:text-softRed hover:bg-white"
            >登录</a
          >
        </div>
        <!-- 汉堡按钮 -->
        <button
          id="menu-btn"
          class="z-30 block md:hidden focus:outline-none hamburger"
        >
          <span class="hamburger-top"></span>
          <span class="hamburger-middle"></span>
          <span class="hamburger-bottom"></span>
        </button>
      </div>
      <!-- 移动端菜单 -->
      <div
        id="menu"
        class="fixed inset-0 z-20 hidden flex-col items-center self-end w-full h-full min-h-screen px-6 py-1 pt-24 pb-4 tracking-widest text-white uppercase divide-y divide-gray-500 opacity-90 bg-veryDarkBlue"
      >
        <div class="w-full py-3 text-center">
          <a href="#features" class="block hover:text-softRed">功能</a>
        </div>
        <div class="w-full py-3 text-center">
          <a href="#download" class="block hover:text-softRed">下载</a>
        </div>
        <div class="w-full py-3 text-center">
          <a href="#faq" class="block hover:text-softRed">常见问题</a>
        </div>
        <div class="w-full py-3 text-center">
          <a href="#" class="block hover:text-softRed">登录</a>
        </div>
      </div>
    </nav>

    <!-- hero -->
    <section id="hero">
      <!-- 图片和内容容器 -->
      <div
        class="container flex flex-col-reverse mx-auto p-6 lg:flex-row lg:mb-0"
      >
        <!-- 内容 -->
        <div class="flex flex-col space-y-10 lg:mt-16 lg:w-1/2">
          <h1
            class="text-3xl font-semibold text-center lg:text-6xl lg:text-left"
          >
            一个简单的书签管理器
          </h1>
          <p
            class="max-w-md mx-auto text-lg text-center text-gray-400 lg:text-2xl lg:text-left lg:mt-0 lg:mx-0"
          >
            一个干净简单的界面来组织您喜欢的网站。
            打开一个新的浏览器选项卡并立即查看您的网站加载。免费试用。
          </p>
          <!-- 按钮容器 -->
          <div
            class="flex items-center justify-center w-full space-x-4 lg:justify-start"
          >
            <a
              href=""
              class="p-4 text-sm font-semibold text-white bg-softBlue rounded shadow-md border-2 border-softBlue md:text-base hover:bg-white hover:text-softBlue"
              >安装到 Chrome</a
            >
            <a
              href=""
              class="p-4 text-sm font-semibold text-black bg-gray-300 rounded shadow-md border-2 border-gray-300 md:text-base hover:bg-white hover:text-gray-600"
              >安装到 Firefox</a
            >
          </div>
        </div>
        <!-- 图片 -->
        <div class="relative mx-auto lg:mx-0 lg:mb-0 lg:w-1/2">
          <div class="bg-hero"></div>
          <img
            src="/images/illustration-hero.svg"
            alt=""
            class="relative z-10 lg:top-24 xl:top-0 overflow-x-visible"
          />
        </div>
      </div>
    </section>

    <!-- features heading -->
    <section id="features">
      <div class="container mx-auto mt-16 px-6">
        <h2 class="mb-6 text-4xl font-semibold text-center">功能</h2>
        <p class="max-w-md mx-auto text-center text-grayishBlue">
          我们的目标是让您快速轻松地访问您喜爱的网站。
          您的书签在您的设备之间同步，因此您可以随时随地访问它们。
        </p>
      </div>
    </section>
    <!-- fetaures tabs -->
    <section id="tabs">
      <!-- 选项卡和面板容器 -->
      <div class="container relative mx-auto my-6 mb-32 mt-12 px-6">
        <div class="bg-tabs"></div>
        <!-- 选项卡弹性容器 -->
        <div
          class="flex flex-col justify-center max-w-xl mx-auto mb-6 border-b md:space-x-10 md:flex-row"
        >
          <!-- tab 1 -->
          <div
            class="flex justify-center text-center text-gray-600 border-b md:border-b-0 md:w-1/3 hover:text-softRed tab"
            data-target="panel-1"
          >
            <div class="py-5 border-b-4 border-softRed" data-target="panel-1">
              简单的书签
            </div>
          </div>
          <!-- tab 2 -->
          <div
            class="flex justify-center text-center text-gray-600 border-b md:border-b-0 md:w-1/3 hover:text-softRed tab"
            data-target="panel-2"
          >
            <div class="py-5" data-target="panel-2">快速搜索</div>
          </div>
          <!-- tab 3 -->
          <div
            class="flex justify-center text-center text-gray-600 border-b md:border-b-0 md:w-1/3 hover:text-softRed tab"
            data-target="panel-3"
          >
            <div class="py-5" data-target="panel-3">轻松分享</div>
          </div>
        </div>
        <!-- 面板 -->
        <div id="panels" class="container mx-auto">
          <!-- 面板1 -->
          <div
            class="flex flex-col py-5 md:flex-row md:space-x-7 panel panel-1"
          >
            <!-- 图片 -->
            <div class="flex justify-center md:w-1/2">
              <img
                src="/images/illustration-features-tab-1.svg"
                alt=""
                class="relative z-10"
              />
            </div>
            <!-- 内容 -->
            <div class="flex flex-col space-y-8 md:w-1/2">
              <h3
                class="mt-32 text-3xl font-semibold text-center md:mt-0 md:text-left"
              >
                一键收藏
              </h3>
              <p class="max-w-md text-center text-grayishBlue md:text-left">
                随心所欲地组织您的书签。
                我们简单的拖放界面让您可以完全控制自己喜欢的网站的管理方式。
              </p>
              <div class="mx-auto md:mx-0">
                <a
                  href=""
                  class="px-6 py-3 mt-4 font-semibold text-white border-2 border-white rounded-lg md:inline-flex bg-softBlue hover:bg-white hover:text-softBlue hover:border-softBlue hover:border-2"
                  >了解更多</a
                >
              </div>
            </div>
          </div>
          <!-- 面板2 -->
          <div
            class="hidden flex-col py-5 md:flex-row md:space-x-7 panel panel-2"
          >
            <!-- 图片 -->
            <div class="flex justify-center md:w-1/2">
              <img
                src="/images/illustration-features-tab-2.svg"
                alt=""
                class="relative z-10"
              />
            </div>
            <!-- 内容 -->
            <div class="flex flex-col space-y-8 md:w-1/2">
              <h3
                class="mt-14 text-3xl font-semibold text-center md:mt-0 md:text-left"
              >
                智能搜索
              </h3>
              <p class="max-w-md text-center text-grayishBlue md:text-left">
                我们强大的搜索功能将帮助您立即找到保存的网站。
                无需浏览所有书签。
              </p>
              <div class="mx-auto md:mx-0">
                <a
                  href=""
                  class="px-6 py-3 mt-4 font-semibold text-white border-2 border-white rounded-lg md:inline-flex bg-softBlue hover:bg-white hover:text-softBlue hover:border-softBlue hover:border-2"
                  >了解更多</a
                >
              </div>
            </div>
          </div>
          <!-- 面板3 -->
          <div
            class="hidden flex-col py-5 md:flex-row md:space-x-7 panel panel-3"
          >
            <!-- 图片 -->
            <div class="flex justify-center md:w-1/2">
              <img
                src="/images/illustration-features-tab-3.svg"
                alt=""
                class="relative z-10"
              />
            </div>
            <!-- 内容 -->
            <div class="flex flex-col space-y-8 md:w-1/2">
              <h3
                class="mt-14 text-3xl font-semibold text-center md:mt-0 md:text-left"
              >
                分享您的书签
              </h3>
              <p class="max-w-md text-center text-grayishBlue md:text-left">
                轻松与他人共享您的书签和收藏。
                创建一个可共享的链接，您可以单击按钮发送该链接。
              </p>
              <div class="mx-auto md:mx-0">
                <a
                  href=""
                  class="px-6 py-3 mt-4 font-semibold text-white border-2 border-white rounded-lg md:inline-flex bg-softBlue hover:bg-white hover:text-softBlue hover:border-softBlue hover:border-2"
                  >了解更多</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- download heading -->
    <section id="download">
      <div class="container mx-auto px-6">
        <h2 class="mb-6 text-3xl font-semibold text-center md:text-4xl">
          下载扩展
        </h2>
        <p class="max-w-lg mx-auto text-center text-grayishBlue">
          我们有更多的浏览器正在筹备中。
          如果您有一个您希望我们优先考虑的最爱，请告诉我们。
        </p>
      </div>
    </section>
    <!-- download boxes -->
    <section id="download-boxes" class="py-32">
      <!-- 容器 -->
      <div
        class="relative flex flex-col items-center max-w-5xl mx-auto space-y-10 px-10 md:px-6 md:space-y-0 md:space-x-7 md:flex-row"
      >
        <!-- 盒子1 -->
        <div
          class="flex flex-col w-full py-6 space-y-4 text-center rounded-lg shadow-lg md:w-1/3"
        >
          <!-- 图片 -->
          <div class="flex justify-center">
            <img src="/images/logo-chrome.svg" alt="" />
          </div>
          <!-- 文本 -->
          <h5 class="pt-6 text-xl font-bold">添加到 Chrome</h5>
          <p class="text-gray-400">最低版本要求：62</p>
          <!-- 按钮及分隔符 -->
          <div class="bg-dots bg-repeat-x px-6 pt-6 capitalize">
            <a
              href=""
              class="block w-full py-3 text-white duration-200 border-2 rounded-lg bg-softBlue hover:text-softBlue hover:bg-white border-softBlue"
              >添加并安装扩展</a
            >
          </div>
        </div>
        <!-- 盒子2 -->
        <div class="w-full md:w-1/3">
          <div
            class="flex flex-col w-full py-6 space-y-4 text-center rounded-lg shadow-lg md:mt-8"
          >
            <!-- 图片 -->
            <div class="flex justify-center">
              <img src="/images/logo-firefox.svg" alt="" />
            </div>
            <!-- 文本 -->
            <h5 class="pt-6 text-xl font-bold">添加到 Firefox</h5>
            <p class="text-gray-400">最低版本要求：55</p>
            <!-- 按钮及分隔符 -->
            <div class="bg-dots bg-repeat-x px-6 pt-6 capitalize">
              <a
                href=""
                class="block w-full py-3 text-white duration-200 border-2 rounded-lg bg-softBlue hover:text-softBlue hover:bg-white border-softBlue"
                >添加并安装扩展</a
              >
            </div>
          </div>
        </div>
        <!-- 盒子3 -->
        <div class="w-full md:w-1/3">
          <div
            class="flex flex-col w-full py-6 space-y-4 text-center rounded-lg shadow-lg md:mt-16"
          >
            <!-- 图片 -->
            <div class="flex justify-center">
              <img src="/images/logo-opera.svg" alt="" />
            </div>
            <!-- 文本 -->
            <h5 class="pt-6 text-xl font-bold">添加到 Opera</h5>
            <p class="text-gray-400">最低版本要求：46</p>
            <!-- 按钮及分隔符 -->
            <div class="bg-dots bg-repeat-x px-6 pt-6 capitalize">
              <a
                href=""
                class="block w-full py-3 text-white duration-200 border-2 rounded-lg bg-softBlue hover:text-softBlue hover:bg-white border-softBlue"
                >添加并安装扩展</a
              >
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- faq heading -->
    <section id="faq">
      <div class="container mx-auto">
        <h2 class="mb-6 text-3xl font-semibold text-center md:text-4xl">
          常见问题
        </h2>
        <p class="max-w-lg px-6 mx-auto text-center text-grayishBlue">
          以下是我们的一些常见问题解答。
          如果您有任何其他需要回答的问题，请随时给我们发送电子邮件。
        </p>
      </div>
    </section>
    <!-- faq accordion -->
    <section id="faq-accordion">
      <!-- 主容器 -->
      <div class="container mx-auto px-6 mb-32">
        <!-- 手风琴容器 -->
        <div class="max-w-2xl m-8 mx-auto overflow-hidden">
          <!-- tab 1 -->
          <div class="py-1 border-b outline-none group" tabindex="1">
            <!-- tab 弹性容器 -->
            <div
              class="flex items-start justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease"
            >
              <!-- 标题 -->
              <div
                class="transition duration-500 ease group-hover:text-red-500"
              >
                什么是书签？
              </div>
              <!-- 箭头 -->
              <div
                class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
                  <path
                    fill="none"
                    stroke="currentColor"
                    stroke-width="3"
                    d="M1 1l8 8 8-8"
                  />
                </svg>
              </div>
            </div>
            <!-- 内部容器 -->
            <div
              class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease"
            >
              <p class="py-2 text-justify text-gray-400">
                和生著子功養興望大在中所的然生料意全城在於八，之區了現把一！回有其在河是操地。答山望一是拿子一打這能響謝半發言我生友事？景我大理種一國，此等野要帶得？關其屋陸童量老西……到的那子時臉專來白，設要任定？相標色斷直理功人人願司香險們亮黨起一張他天。
              </p>
            </div>
          </div>
          <!-- tab 2 -->
          <div class="py-1 border-b outline-none group" tabindex="2">
            <!-- tab 弹性容器 -->
            <div
              class="flex items-start justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease"
            >
              <!-- 标题 -->
              <div
                class="transition duration-500 ease group-hover:text-red-500"
              >
                如何请求一个新的浏览器？
              </div>
              <!-- 箭头 -->
              <div
                class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
                  <path
                    fill="none"
                    stroke="currentColor"
                    stroke-width="3"
                    d="M1 1l8 8 8-8"
                  />
                </svg>
              </div>
            </div>
            <!-- 内部容器 -->
            <div
              class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease"
            >
              <p class="py-2 text-justify text-gray-400">
                棵好花美向記喜點隻買。讀路爬旦還棵澡急蝶學己進假媽欠麼北？青抱放、話北姊。地小以朵爬刀里息欠昔紅朱抓一，肖童己雞千羊蝴共占雨元意。圓游京火波它、歡樹眼乾發追手娘朋害。這蝶但。
              </p>
            </div>
          </div>
          <!-- tab 3 -->
          <div class="py-1 border-b outline-none group" tabindex="3">
            <!-- tab 弹性容器 -->
            <div
              class="flex items-start justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease"
            >
              <!-- 标题 -->
              <div
                class="transition duration-500 ease group-hover:text-red-500"
              >
                它有手机 App 吗？
              </div>
              <!-- 箭头 -->
              <div
                class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
                  <path
                    fill="none"
                    stroke="currentColor"
                    stroke-width="3"
                    d="M1 1l8 8 8-8"
                  />
                </svg>
              </div>
            </div>
            <!-- 内部容器 -->
            <div
              class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease"
            >
              <p class="py-2 text-justify text-gray-400">
                雪火牛掃蛋六就親清古細友，刃間澡化品種哪害抱讀經弟祖葉畫麼福共；助每請空久旦抄我扒；花實完您二面鴨掃吧因休京而帶玉見地。辛未足跑共葉。
              </p>
            </div>
          </div>
          <!-- tab 4 -->
          <div class="py-1 border-b outline-none group" tabindex="4">
            <!-- tab 弹性容器 -->
            <div
              class="flex items-start justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease"
            >
              <!-- 标题 -->
              <div
                class="transition duration-500 ease group-hover:text-red-500"
              >
                是否兼容其它基于 Chromium 内核的浏览器？
              </div>
              <!-- 箭头 -->
              <div
                class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
                  <path
                    fill="none"
                    stroke="currentColor"
                    stroke-width="3"
                    d="M1 1l8 8 8-8"
                  />
                </svg>
              </div>
            </div>
            <!-- 内部容器 -->
            <div
              class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease"
            >
              <p class="py-2 text-justify text-gray-400">
                火空校五要人色乙動象打頭什春很午聲；別朋故包河斤五安欠雪喝會，衣步誰每媽刀室躲完媽前加羊我物怕！他彩尤飯教兩給？洋七金位棵麼帶泉胡園首兆學急「怪以追害戊幫帽西做」過請你甲姐，書胡嗎。
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- newsletter -->
    <section id="newsletter" class="bg-softBlue">
      <!-- 主容器 -->
      <div class="max-w-lg mx-auto py-24">
        <p
          class="mb-6 text-lg tracking-widest text-center text-white uppercase"
        >
          35,000+ 已经订阅
        </p>
        <h2
          class="px-3 mb-6 text-3xl font-semibold text-center text-white md:text-4xl"
        >
          随时了解我们正在做的事情
        </h2>
        <!-- 表单 -->
        <form
          action=""
          class="flex flex-col items-start justify-center max-w-2xl mx-auto space-y-6 text-base px-6 md:flex-row md:space-y-0 md:space-x-4 md:px-0"
        >
          <!-- 文本框和按钮容器 -->
          <div
            class="flex flex-col justify-between items-center mx-auto md:flex-row md:mx-0"
          >
            <input
              type="email"
              class="flex-1 px-6 pt-3 pb-2 mb-4 rounded-lg border border-white focus:outline-none md:mr-3 md:mb-0"
              placeholder="输入你的邮箱地址"
            />
            <input
              type="submit"
              class="inline-flex px-6 py-3 font-semibold text-center text-white duration-200 transform rounded-lg cursor-pointer focus:outline-none bg-softRed hover:opacity-90"
              value="联系我们"
            />
          </div>
        </form>
      </div>
    </section>

    <footer class="py-16 bg-veryDarkBlue">
      <!-- 弹性容器 -->
      <div
        class="container flex flex-col items-center justify-between mx-auto space-y-16 px-6 md:flex-row md:space-y-0"
      >
        <!-- LOGO和菜单容器 -->
        <div
          class="flex flex-col items-center justify-between space-y-8 text-lg font-light md:flex-row md:space-y-0 md:space-x-14 text-grayishBlue"
        >
          <img src="/images/logo-bookmark-footer.svg" alt="" class="mb-1" />
          <a href="#features" class="uppercase hover:text-softRed">功能</a>
          <a href="#download" class="uppercase hover:text-softRed">下载</a>
          <a href="#faq" class="uppercase hover:text-softRed">常见问题</a>
        </div>
        <!-- 社交媒体容器 -->
        <div class="flex space-x-10">
          <a href="">
            <img src="/images/icon-facebook.svg" alt="" class="h-6 ficon" />
          </a>
          <a href="">
            <img src="/images/icon-twitter.svg" alt="" class="h-6 ficon" />
          </a>
        </div>
      </div>
    </footer>
    <script type="module" src="/main.js"></script>
  </body>
</html>
